/**
 * Created by lee_mxue on 17/2/16.
 */
import React from "react";
import ReactDOM from "react-dom";
import AJAX from "../../lib/ajax";
import { addErrorListener } from "../../lib/handleError"
import weixinShare from "../../lib/weixinShare";

require('../../lib/rem');
require('./ExpressCompany.less');
require('../../styles/common.less');
require('../../styles/resetWeui.less');
require('../../styles/lux.less')

class App extends React.Component {
    constructor(props) {
        super(props);
        this.handleSelectExpress = this.handleSelectExpress.bind(this); //获取快递公司列表
        this.getCommonExpress = this.getCommonExpress.bind(this);   //获取常用快递公司列表
        this.handleSearch = this.handleSearch.bind(this);   //搜索
        this.state = {
            isLoding: true,
            search_express: undefined,  //快递公司列表（搜索）
            express: {
                count: 0,
                list: []
            },  //快递公司列表（全部）
            common_express: undefined,  //常用快递公司列表
            common_express_isopen: false,   //常用快递公司列表是否显示
            letter: [], //首字母列表
        }
    }

    componentWillMount() {
        addErrorListener()()
        //隐藏分享功能
        weixinShare.hideAll();
        
        var _this = this;
        //获取签名
        AJAX.request("express_get_all", {}, (data) => {
            // console.log(data);
            //全部快递公司列表
            var myexpress = {
                count: data.body.count,
                list: data.body.list
            }
            //所有快递公司首字母
            var myLetter = [];
            //常用快递公司列表
            var myCommonExpress = data.body.common_list;

            myexpress.list.map((item, key) => {
                var letter_item = item.pinyin.substring(0, 1);
                if (key > 0) {
                    var before_letter_item = myexpress.list[key - 1].pinyin.substring(0, 1);
                    if (letter_item != before_letter_item)
                        myLetter.push(letter_item)
                } else {
                    myLetter.push(letter_item)
                }
            })
            _this.setState({
                isLoding: false,
                express: myexpress,
                letter: myLetter,
                common_express: myCommonExpress,
            })
        })
    }

    //选择快递公司
    handleSelectExpress(item) {
        //将快递公司存入localStorage
        localStorage.setItem("checkPackage_express_info_x", JSON.stringify(item))
        window.location.href = "./PackageTracker"
    }


    componentDidMount() {
        AJAX.appendBaiduAnalysis()
    }

    //获取常用快递公司列表
    getCommonExpress() {
        if(this.state.isLoding) {
            return
        }
        this.setState({
            common_express_isopen: !this.state.common_express_isopen
        })
    }

    //搜索
    handleSearch(e) {
        var value = e.target.value;
        var express_data = {
            count: 0,
            list: [],
        };
        if(value){
            this.state.express.list.map(item => {
                if (item.name.indexOf(value) >= 0) {
                    express_data.list.push(item)
                    express_data.count++;
                }
            })

            this.setState({
                search_express: express_data
            })
        }else {
            this.setState({
                search_express: undefined
            })
        }

    }


    render() {
        // console.log("this.state.express: ",this.state.express)
        var data_list = [];

        if(!this.state.search_express){
             data_list = this.state.common_express_isopen ? this.state.common_express : this.state.express.list
        }else{
            data_list = this.state.search_express.list
        }
        return (
            <div className="main">
                {this.state.common_express_isopen || this.state.search_express ? "" : <div className="fix_letter">
                    {
                        this.state.letter.map((item) => {
                            return (
                                <a href={"#name_" + item}>{item}</a>
                            )
                        })
                    }
                </div>}


                <div className="top_active">
                    <div className="input_box">
                        <input type="text" name="" onChange={this.handleSearch} placeholder="搜索" id=""/>
                    </div>
                    <div className={`common_use ${this.state.common_express_isopen ? ''+'textBlue' : +''}`}
                         onClick={this.getCommonExpress}>☆常用快递
                    </div>
                </div>
                <div className="center_content">
                    {
                        data_list.map((item, key) => {
                            if (key > 0) {
                                var flag1 = item.pinyin.substring(0, 1);
                                var flag2 = this.state.express.list[key - 1].pinyin.substring(0, 1);
                                if (flag1 == flag2) {
                                    return (
                                        <div className="list_item" onClick={this.handleSelectExpress.bind(this, item)}>
                                            <div className="item_left">
                                                <img src={item.img} alt="" style={{width: 40}}/>
                                            </div>
                                            <div className="item_right">
                                                <p>{item.name}</p>
                                                <p className="textGray">{item.telephone}</p>
                                            </div>
                                        </div>
                                    )
                                } else {
                                    return (
                                        <div className="list_item" onClick={this.handleSelectExpress.bind(this, item)}>
                                            <a name={"name_" + flag1} id={"name_" + flag1}
                                               className="vis_hidden">{flag1}</a>
                                            <div className="item_left">
                                                <img src={item.img} alt="" style={{width: 40}}/>
                                            </div>
                                            <div className="item_right">
                                                <p>{item.name}</p>
                                                <p className="textGray">{item.telephone}</p>
                                            </div>
                                        </div>
                                    )
                                }
                            } else {
                                return (
                                    <div className="list_item" onClick={this.handleSelectExpress.bind(this, item)}>
                                        <a name="name_A" id="name_A" className="none">A</a>
                                        <div className="item_left">
                                            <img src={item.img} alt="" style={{width: 40}}/>
                                        </div>
                                        <div className="item_right">
                                            <p>{item.name}</p>
                                            <p className="textGray">{item.telephone}</p>
                                        </div>
                                    </div>
                                )
                            }


                        })

                    }

                </div>
            </div>

        )
    }
}
ReactDOM.render(<App />, document.getElementById('app'));
if (module.hot) {
    module.hot.accept();
}